{% extends 'base.html' %}

{% block style %}
    <style>
        .table thead tr th, .table tbody tr td {
            text-align: center;
            vertical-align: top;
        }
    </style>
{% endblock %}

{% block content %}
    <div class="container">
        <div class="row">
            <div class="col-lg-4">
                <div class="text-left">现在时间是：<span id="localTime"
                                                   class="font-weight-bold"></span></div>
            </div>
            <div class="col-lg-5">
                <h2>{{ month|date:'Y年m月' }}机房日志</h2>
            </div>
            <div class="col-lg-3">
                <div class="btn-group">
                    {% now "Ymd" as date %}
                    {% now "Y" as current_y %}
                    {% now "m" as current_m %}
                    {% now "d" as current_d %}
                    {% if has_today_am_log %}
                        <a title="修改{{ now|date:'Y-m-d' }} 上午日志" class="btn btn-success"
                           data-toggle="tooltip" data-placement="top"
                           href="{% url 'update_lablog' current_y current_m current_d 1 %}">上午日志已添加</a>
                    {% else %}
                        <a title="添加{{ now|date:'Y-m-d' }} 上午日志" class="btn btn-primary"
                           data-toggle="tooltip" data-placement="top"
                           href="{% url 'create_lablog' current_y current_m current_d 1 %}">添加上午日志</a>
                    {% endif %}
                    {% if has_today_pm_log %}
                        <a title="修改{{ now|date:'Y-m-d' }} 下午日志" class="btn btn-success"
                           data-toggle="tooltip" data-placement="top"
                           href="{% url 'update_lablog' current_y current_m current_d 2 %}">下午日志已添加</a>
                    {% else %}
                        {% now "A" as time %}
                        {% if time == "PM" %}
                            <a title="添加{{ now|date:'Y-m-d' }} 下午日志" class="btn btn-primary"
                               data-toggle="tooltip" data-placement="top"
                               href="{% url 'create_lablog' current_y current_m current_d 2 %}">添加下午日志</a>
                        {% else %}
                            <span title="请在中午12:00以后刷新页面再添加" class="btn btn-secondary">添加下午日志</span>
                        {% endif %}
                    {% endif %}
                </div>
            </div>
        </div>
        <div class="row">
            {% now 'Ym' as now_month %}
            <div class="col-4 mb-2">
                {% if month|date:'Ym' == now_month %}
                    <span title="{{ month|date:'Y年m月' }}值班表" data-toggle="tooltip" data-placement="top">
                        <a class="btn btn-success disabled" href="">本月值班表</a>
                    </span>
                {% else %}
                    <a class="btn btn-primary" title="查看{% now 'Y年m月' %}值班表"
                       data-toggle="tooltip" data-placement="top"
                       href="{% url 'lablog_by_month' current_y current_m %}">查看本月台站日志 </a>
                {% endif %}
            </div>
            <div class="btn-group col-4 mb-2 justify-content-center">
                <a class="btn btn-outline-primary"
                   title="查看{{ previous_month|date:'Y年m月' }}值班表"
                   data-toggle="tooltip" data-placement="top"
                   href="{% url 'lablog_by_month' previous_month|date:'Y' previous_month|date:'m' %}">上一个月</a>
                {% if next_month %}
                    <a class="btn btn-outline-primary"
                       title="查看{{ next_month|date:'Y年m月' }}值班表"
                       data-toggle="tooltip" data-placement="top"
                       href="{% url 'lablog_by_month' next_month|date:'Y' next_month|date:'m' %}">下一个月</a>
                {% else %}
                    <a class="btn btn-outline-primary disabled" href="">已至当前月</a>
                {% endif %}
            </div>
        </div>
    </div>

    <div class="container">
        <table class="table table-striped table-hover">
            <caption>{{ month|date:'Y年m月' }}机房日志</caption>
            <colgroup>
                <col width="21%">
                <col width="9%">
                <col width="9%">
                <col width="9%">
                <col width="10%">
                <col width="9%">
                <col width="9%">
                <col width="12%">
                <col width="12%">
            </colgroup>
            <thead>
            <tr>
                <th>记录时间</th>
                <th>机房温度<br/>(°)</th>
                <th>机房湿度<br/>(%RH)</th>
                <th>操作室<br/>温度(°)</th>
                <th>操作室<br/>湿度(%RH)</th>
                <th>行业网<br/>延迟(ms)</th>
                <th>行业网<br/>掉包率(%)</th>
                <th>值班人</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            {% for lablog in lablog_list %}
                <tr class="{% if lablog.adding_way == 1 %}table-danger{% elif lablog.adding_way == 2 %}table-warning{% endif %} {% if lablog.get_schedule.is_today %}table-primary{% endif %}">
                    <th>
                        {{ lablog.log_date|date:'Y-m-d' }}
                        {{ lablog.log_time }}
                        <span class="badge {% if lablog.time_slot == 1 %}badge-primary{% else %}badge-success{% endif %}">{{ lablog.get_time_slot_display }}</span>
                    </th>
                    <td>{{ lablog.lab_template }}</td>
                    <td>{{ lablog.lab_humidity }}</td>
                    <td>{{ lablog.hc_room_template }}</td>
                    <td>{{ lablog.hc_room_humidity }}</td>
                    <td>{{ lablog.network_delay }}</td>
                    <td>{{ lablog.packet_lose_rate }}</td>
                    <td>{{ lablog.get_schedule.actual_duty_person.name }}</td>
                    <td>
                        {% if lablog.adding_way == 1 %}
                            <a title="此日志自动添加需要立即修改为{{ now|date:'Y-m-d' }} {{ lablog.get_time_slot_display }}的真实日志"
                               class="btn btn-danger btn-sm"
                               data-toggle="tooltip" data-placement="top"
                               href="{% url 'update_lablog' lablog.log_date.year lablog.log_date.month lablog.log_date.day lablog.time_slot %}">修改</a>
                        {% elif lablog.is_overdue %}
                            <span title="时限超期不能修改" data-toggle="tooltip" data-placement="top">
                                <a class="btn btn-secondary btn-sm disabled" href="">修改</a>
                            </span>
                        {% else %}
                            <a title="修改{{ now|date:'Y-m-d' }} {{ lablog.get_time_slot_display }}日志"
                               class="btn btn-primary btn-sm"
                               data-toggle="tooltip" data-placement="top"
                               href="{% url 'update_lablog' lablog.log_date.year lablog.log_date.month lablog.log_date.day lablog.time_slot %}">修改</a>
                        {% endif %}
                    </td>
                </tr>
            {% endfor %}
            </tbody>
        </table>
    </div>
{% endblock content %}

{% block script %}
    <script type="text/javascript">
        $(document).ready(function () {
            getServerTime();
            setInterval(function () {
                getServerTime();
            }, 600000);

            $('[data-toggle="tooltip"]').tooltip();
        });

        function getServerTime() {
            $.ajax({
                url: "/logs/ajax/server_now/",
                type: "GET",
                success: function (data) {
                    //console.log(data.server_time);
                    date = new Date(data.server_time).valueOf();
                    var timeDiff = new Date().valueOf() - date;

                    function serverTime() {
                        this.date = new Date();
                        this.date.setTime(new Date().valueOf() - timeDiff);
                        this.year = this.date.getFullYear();
                        this.month = this.date.getMonth() + 1;
                        this.day = this.date.getDate();
                        this.hour = this.date.getHours() < 10 ? "0" + this.date.getHours() : this.date.getHours();
                        this.minute = this.date.getMinutes() < 10 ? "0" + this.date.getMinutes() : this.date.getMinutes();
                        this.second = this.date.getSeconds() < 10 ? "0" + this.date.getSeconds() : this.date.getSeconds();
                        var s = this.year + '年' + this.month + '月' + this.day + '日 ' + this.hour + ':' + this.minute + ':' + this.second;
                        //console.log(s);
                        $("#localTime").html(s);
                    }

                    var num = 0;
                    var i = setInterval(function () {
                        serverTime();
                        num++;
                        if (num >= 600)
                            clearInterval(i);
                    }, 1000);
                }
            })
        }
    </script>
{% endblock script %}
